﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>表单页面</title>
    <link href="style/user.css" rel="stylesheet" />
    <script src="script/config.js"></script>
    <link href="/style/lib.css" rel="stylesheet" />
    <style type="text/css">
        body{background-color:#f4f4f6;}
        .cards{margin-left:0 !important;padding-bottom:0 !important; padding-top:0px !important;padding-left:0 !important;}
        .card{height:100.25px; border:none; border-radius:2px;background-color:#ffffff;}
        .card i{font-size:60px !important;}
        .cards .title{color:#a2a2a2; text-align:center;margin-top:20px;}
        .cards .content{font-size:20px; text-align:center;}
        .card1,.card2,.card3,.card4{width:40%;height:100%;float:left; margin-left:20px;}
        .cardcontent{width:40%;height:100%;margin-left:50%;}
        .card1,.content1{color: #68a8fd;}
        .card2,.content2{color: #feb302;}
        .card3,.content3{color: #67c1c2;}
        .card4,.content4{color: #B8860B;}

        .member-card{height:400px;}
        .member{width:100%;height:100%;background-color:#ffffff;}
    </style>
</head>
<body>
    <div class="cards col-md-12 col-sm-12 col-lg-12">
        <div class="col-md-3 col-sm-3 col-lg-3">
            <div class="card">
                <div class="card1"><i class="if user-plus"></i></div>
                <div class="cardcontent">
                    <p class="title">新增用户(人)</p>
                    <p class="content1 content" id="TotalNewCustomer">0</p>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-3 col-lg-3">
            <div class="card">
                <div class="card3"><i class="if dingdan"></i></div>
                <div class="cardcontent">
                    <p class="title">新增订单</p>
                    <p class="content3 content" id="TotalNewOrder">0</p>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-3 col-lg-3">
            <div class="card">
                <div class="card2"><i class="if qian"></i></div>
                <div class="cardcontent">
                    <p class="title">累计收入(元)</p>
                    <p class="content2 content" id="TotalIncome">0</p>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-3 col-lg-3">
            <div class="card">
                <div class="card4"><i class="if huiyuan"></i></div>
                <div class="cardcontent">
                    <p class="title">总会员人数(人)</p>
                    <p class="content4 content" id="TotalCustomer">0</p>
                </div>
            </div>
        </div>
    </div>
    <div class="member-card col-md-12 col-sm-12 col-lg-12">
        <div id="member" class="member col-md-12 col-sm-12 col-lg-12">

        </div>
    </div>
</body>
</html>
<script src="script/plugins/echarts/echarts.min.js"></script>
<script  type="text/javascript">
    $(function () {
        var apiUrl = "homemanage/home";
        $.http.request(apiUrl,null, {
            pass: function (d) {
                $("#TotalNewCustomer").html(d.TotalNewCustomer);
                $("#TotalNewOrder").html(d.TotalNewOrder);
                $("#TotalCustomer").html(d.TotalCustomer);
                $("#TotalIncome").html(d.TotalIncome);
            },
            error: function (d) {

            }
        });
        loadMemberData();
    });
    function loadMemberData() {

        var myChart = echarts.init(document.getElementById('member'));
        var date = ["1:00:00", "2:00:00", "3:00:00", "4:00:00", "5:00:00", "6:00:00", "7:00:00", "8:00:00",
            "9:00:00", "10:00:00", "11:00:00", "12:00:00", "13:00:00", "14:00:00", "15:00:00", "16:00:00", "17:00:00", "18:00:00",
            "19:00:00", "20:00:00", "21:00:00", "22:00:00", "23:00:00", "24:00:00"];
        var data = [12,123,23,342,123,321,234,21,234,12,321,23,123,123,123,321,123,34,123,543,45,65,56,90];

        option = {
            tooltip: {
                trigger: 'axis',
                position: function (pt) {
                    return [pt[0], '10%'];
                }
            },
            title: {
                top: "10",
                left: 'left',
                text: '会员增加时间图',
                textStyle: {
                    fontSize: 12,
                    color: "#676767"
                }
            },
            grid: {
                left: 40,
                right: 40,
                show:false,
                borderColor:"#F3F5FE"
            },
            toolbox: {
                show:false,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                splitLine: { show: false },
                type: 'category',
                boundaryGap: false,
                data: date,
                axisLine: {
                    lineStyle: {
                        color:"#C9D0DF"
                    }
                }
            },
            yAxis: {
                splitLine: { show: false },
                type: 'value',
                boundaryGap: [0, '100%'],
                axisLine: {
                    lineStyle: {
                        color: "#C9D0DF"
                    }
                }
            },
            series: [
                {
                    name: '会员数量',
                    type: 'line',
                    smooth: true,
                    symbol: 'none',
                    sampling: 'average',
                    itemStyle: {
                        normal: {
                            color: '#74AFFB'
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#F3F7FE'
                            }, {
                                offset: 1,
                                color: '#74AFFB'
                            }])
                        }
                    },
                    data: data
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }
</script>

